<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.生命周期练习</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.2/axios.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>你开页面已经第{{n}}秒了</h2>
			<h2>{{msg}}</h2>
			<button @click="goDie">不活了</button>
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					n:1,
					msg:'今天天气很不错！'
				},
				methods:{
					goDie(){
						this.$destroy()
					}
				},
				mounted() {
					// 一挂载就开启一个循环定时器，更新n值
					this.timeId = setInterval(()=>{
						console.log('定时器的回调正在执行')
						this.n+=1
					},1000)
					//一挂载就发起一个ajax请求获取一些有意思的话
					let x = axios.get('https://api.uixsj.cn/hitokoto/get?type=social')
					x.then((response)=>{
						this.msg = response.data
					},(error)=>{
						this.msg = error
					})
				},
				beforeDestroy(){
					clearInterval(this.timeId)
				}
			})
		</script>
	</body>
</html>